<template>
  <div>
    <el-form :model="searchList" ref="searchList" size="normal">
      <el-row :gutter="20">
        <el-col :span="6" :offset="0">
          <el-form-item label="">
            <el-input v-model="searchList.contract_name" placeholder="合同名称" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="0">
          <el-form-item label="">
            <el-select v-model="searchList.first_apply" placeholder="是否第一次运维" clearable class="wid">
              <el-option v-for="item in contractType" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-button type="primary" size="medium" @click="search" :loading="loading">查询</el-button>
        </el-col>
      </el-row>
    </el-form>

    <el-table :data="tableData.results" border stripe :height="offsetHeight" v-loading="loading">
      <el-table-column type="index" label="序号" width="60" align="center">
      </el-table-column>
      <el-table-column prop="contract_name" label="合同名称" align="center">
      </el-table-column>
      <el-table-column prop="first_apply" label="是否第一次运维" width="150" align="center">
      </el-table-column>
      <el-table-column prop="service_pre_amount_sum" label="申请金额" width="120" align="center">
      </el-table-column>
      <el-table-column prop="third_check_amount_sum" label="审核金额" width="100" align="center">
      </el-table-column>
      <el-table-column label="操作" width="300" align="center">
        <template slot-scope="{row}">
          <el-button-group>
            <el-button type="green" size="mini" @click="contractInfo(row.id)">合同信息</el-button>
            <el-button type="primary" size="mini" @click="it(row.id)">查看IT资产和运维服务</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination @size-change="pageSizeChange" @current-change="pageNoChange" :page-sizes="[10, 50, 100, 200]"
        :page-size="10" background layout="total, sizes, prev, pager, next" :total="tableData.totalRecord">
      </el-pagination>
    </div>
    <!-- 合同信息 -->
    <el-drawer title="项目信息" :visible.sync="contractShow" size="70%" center :destroy-on-close="true"
      :wrapperClosable="false">
      <contract-item :contract-params="contractParams" @cancel="cancel" @init="init"></contract-item>
    </el-drawer>
  </div>
</template>
<script>
import ContractItem from '@/components/Contract'
export default {
  name: 'PastDeclaredApplyContract',
  components: {
    ContractItem
  },
  props: {
    pid: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data () {
    return {
      loading: false,
      saveLoading: false,
      searchList: {},
      tableData: [],
      offsetHeight: document.documentElement.clientHeight - 280,
      pageNo: '1',
      pageSize: '10',
      contractType: [
        { value: '0', label: '是' },
        { value: '1', label: '否' },
      ],
      contractShow: false,
      contractParams: {},
    }
  },
  created () {

  },
  mounted () {
  },
  methods: {
    async init () {
      this.loading = true
      const res = await this.$http('inputContractPage', {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        project_id: this.pid,
        ...this.searchList
      })
      this.tableData = res
      this.loading = false
    },
    search () {
      this.pageNo = '1'
      this.pageSize = '10'
      this.init()
    },
    contractInfo (id) {
      this.contractShow = true
      this.contractParams = {
        cid: id,
      }
    },
    it (id) {
      this.$emit('itInfo', id);
    },
    cancel () {
      this.contractShow = false
      this.contractParams = {}
    },
    pageNoChange (pageNo) {
      this.pageNo = pageNo
      this.init()
    },
    pageSizeChange (pageSize) {
      this.pageSize = pageSize
      this.init()
    },
  },
  computed: {

  }
}
</script>
<style lang='scss' scoped>
</style>
